<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>

<head>
    <title>Cytoscape Web example</title>

    <!-- JSON support for IE (needed to use JS API) -->
    <script type="text/javascript" src="js/min/json2.min.js"></script>

    <!-- Flash embedding utility (needed to embed Cytoscape Web) -->
    <script type="text/javascript" src="js/min/AC_OETags.min.js"></script>

    <!-- Cytoscape Web JS API (needed to reference org.cytoscapeweb.Visualization) -->
    <script type="text/javascript" src="js/min/cytoscapeweb.min.js"></script>

    <script type="text/javascript">
        window.onload = function() {
            // id of Cytoscape Web container div
            var div_id = "cytoscapeweb";

            // you could also use other formats (e.g. GraphML) or grab the network data via AJAX
            var networ_json = {
                data: {
                    nodes: [{
                        id: "1"
                    }, {
                        id: "2"
                    }],
                    edges: [{
                        id: "2to1",
                        target: "1",
                        source: "2"
                    }]
                }
            };

            // initialization options
            var options = {
                // where you have the Cytoscape Web SWF
                swfPath: "swf/CytoscapeWeb",
                // where you have the Flash installer SWF
                flashInstallerPath: "swf/playerProductInstall"
            };

            // init and draw
            var vis = new org.cytoscapeweb.Visualization(div_id, options);
            vis.draw({
                network: networ_json
            });
        };
    </script>

    <style>
        /* The Cytoscape Web container must have its dimensions set. */
        
        html,
        body {
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
        }
        
        #cytoscapeweb {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="cytoscapeweb">
        Cytoscape Web will replace the contents of this div with your graph.
    </div>
</body>

</html>